// 阶段1

import React, { useEffect } from 'react';
import { Form, Row, Col, Input, DatePicker, Switch, Button } from 'antd';
import { observer, useLocalStore } from 'mobx-react-lite';
import { EvalutionTable } from './EvalutionTable';
import { FileUploader } from '~/components/FileUploader';
import { genValidConfig, guid } from '~/pages/project/new/pageConfig';
import AjaxSelect from '~/components/AjaxSelect';
import '../index.local.sass';

const formItemLayout = {
  wrapperCol: { span: 20 },
};

const { TextArea } = Input;

interface Props {
  tableData: {
    vfData?: Array<any>
    faData?: Array<any>
  }
  getData: (vfData: any, faData: any) => void
  // ['propsName']: any
}

export const StageOne = observer((props: Props) => {
  const { getData, tableData } = props;
  const vfData = tableData.vfData ?? [];
  const faData = tableData.faData ?? [];

  const state = useLocalStore(() => ({
    VFMTableData: [] as any,
    FAATableData: [] as any,
  }));

  // assessment 新增一行
  const addFinancialAssess = (type: string) => {
    const newData: any = {
      key: guid(),
      number: 1,
      createTime: '',
      fileUrl: '',
      hasFile: false,
    };

    if (type === 'vfm') {
      // state.VFMTableData.push(newData); 未触发渲染
      // 深拷贝  触发渲染
      state.VFMTableData = [...state.VFMTableData, newData];
    } else if (type === 'faa') {
      state.FAATableData = [...state.FAATableData, newData];
    }

    getData?.(state.VFMTableData, state.FAATableData);
  };

  // assessment 删除一行
  const deleteFinancialAssess = (type: string, index: number) => {
    if (type === 'vfm') {
      // delete state.VFMTableData[index];
      state.VFMTableData.splice(index, 1);
      state.VFMTableData = [...state.VFMTableData];
    } else if (type === 'faa') {
      state.FAATableData.splice(index, 1);
      state.FAATableData = [...state.FAATableData];
    }

    getData?.(state.VFMTableData, state.FAATableData);
  };

  // assessment 上传附件
  const UploadFinancialAssess = (fileUrl: string, type: string, index: any) => {
    if (type === 'vfm') {
      state.VFMTableData[index] = { ...state.VFMTableData[index], createTime: new Date().getTime(), fileUrl };
      state.VFMTableData = [...state.VFMTableData];
    } else if (type === 'faa') {
      state.FAATableData[index] = { ...state.FAATableData[index], createTime: new Date().getTime(), fileUrl };
      state.FAATableData = [...state.FAATableData];
    }

    getData?.(state.VFMTableData, state.FAATableData);
  };

  const fileUploadOptions = {
    accept: 'application/zip,application/vnd.rar,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
    max: 1,
  };

  useEffect(() => {
    state.VFMTableData = [...vfData];
    state.FAATableData = [...faData];
  }, [vfData, faData]);

  return (
    <div className="stage1">
      <h3><i></i>Project Overview</h3>
      {/* line1 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Planned total project investment'}
            name="plannedTotalInvestment"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Total land area of the project'}
            name="totalLandArea"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" suffix="㎡"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Total length of the project'}
            name="totalLength"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" suffix="km"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line2 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project Contract Term'}
            name="projectContractTerm"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" suffix="year(s)"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Planned project construction start date'}
            name="plannedStartDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Planned project construction completion date'}
            name="plannedCompletionDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line3 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Planned Project operation start date'}
            name="plannedOperationStartDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={'PPP Contract mode'}
            name="contractMode"
            {...formItemLayout}>
            <Input placeholder="Please input"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Procurement method of private enterprise'}
            name="priProcurementMode"
            {...formItemLayout}
          >
            <Input placeholder="Please input"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line4 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Planned procurement date'}
            name="plannedProcurementDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line5 */}
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'PPP scope of contract'}
            name="contractScope"
          >
            <TextArea
              rows={4}
              placeholder="Please provide PPP scope of contract"/>
          </Form.Item>
        </Col>
      </Row>

      <h3><i></i>Technical Assessment</h3>

      {/* line6 */}
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Project scope outline'}
            name="scopeOutline"
          >
            <TextArea
              rows={4}
              placeholder="Please provide project scope outline"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line7 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'FSR approval date(s)'}
            name="fsrApprovalDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'EIA approval date'}
            name="eiaApprovalDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line8 */}
      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <label><span className="require-icon">*</span>FSR</label>
          <div className="switch-item">
            <Form.Item
              name="fsrView"
              valuePropName="checked"
            >
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access" />
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="fsr"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <label>EIA</label>
          <div className="switch-item">
            <Form.Item
              name="eiaView"
              valuePropName="checked"
            >
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="eia"
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      {/* line9 */}
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Output description of the project'}
            name="outputDescription"
            rules={[
              {
                required: true,
                message: 'Please provide output description of the project',
              },
            ]}
          >
            <TextArea
              rows={4}
              placeholder="Please provide output description of the project"/>
          </Form.Item>
        </Col>
      </Row>

      <h3><i></i>Financial Assessment</h3>
      <Row gutter={24} className="mb-2">
        <Col span={24}>
          <div className="flex switch-table">
            <label className="w-12"><span className="require-icon">*</span>VFM</label>
            <Form.Item name="vfmView" valuePropName="checked" className="flex-1">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <Button onClick={() => addFinancialAssess('vfm')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="vfm">
            <EvalutionTable
              type={'vfm'}
              data={state.VFMTableData}
              deleteItem={deleteFinancialAssess}
              UploadItem={UploadFinancialAssess}
            />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <div className="flex switch-table">
            <label className="w-12"><span className="require-icon">*</span>FAA</label>
            <Form.Item name="faaView" valuePropName="checked" className="flex-1">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <Button onClick={() => addFinancialAssess('faa')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="faa">
            <EvalutionTable
              type={'faa'}
              data={state.FAATableData}
              deleteItem={deleteFinancialAssess}
              UploadItem={UploadFinancialAssess}
            />
          </Form.Item>
        </Col>
      </Row>

      {/* line10 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Return mechanism'}
            name="returnMechanism"
            {...formItemLayout}
          >
            <AjaxSelect
              placeholder="Please select"
              type="returnMechanismList"
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Planned private sector investment amount'}
            name="plannedPriInvestmentAmount"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line11 */}
      <Row gutter={24}>
        <Col span={8}>
          <label>Planned government investment and expenditures that need to be arranged from the budget</label>
          <div className="switch-item">
            <Form.Item name="plannedGovernmentSpendingView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <Form.Item name="plannedGovernmentSpending" rules={genValidConfig({ selfType: 'numString', required: 'false' })}>
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line12 */}
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'International financial support'}
            name="internationalFinancialSupport"
          >
            <TextArea
              rows={4}
              placeholder="If available, please indicate the name, nature (grant/loan) and amount of the support (in US dollar)"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line13 */}
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Planned financing structure'}
            name="plannedFinancingStructure"
          >
            <TextArea
              rows={4}
              placeholder="Please provide planned financing structure"/>
          </Form.Item>
        </Col>
      </Row>

      <h3><i></i>Implementation Strategy</h3>

      {/* line14 */}
      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <label><span className="require-icon">*</span>Risk allocation framework</label>
          <div className="switch-item">
            <Form.Item name="riskAllocationFrameworkView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="riskAllocationFramework"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <label><span className="require-icon">*</span>The core content of the PPP project contract</label>
          <div className="switch-item">
            <Form.Item name="contractCoreContentView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="contractCoreContent"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <label><span className="require-icon">*</span>Performance evaluation indicators and system</label>
          <div className="switch-item">
            <Form.Item name="indicatorsAndSystemView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="indicatorsAndSystem"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      {/* line15 */}
      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <label><span className="require-icon">*</span>Contract system</label>
          <div className="switch-item">
            <Form.Item name="contractSystemView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="contractSystem"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <label><span className="require-icon">*</span>PPP-related regulatory framework</label>
          <div className="switch-item">
            <Form.Item name="regulatoryFrameworkView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <div className="file-item">
            <Form.Item
              name="regulatoryFramework"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader {...fileUploadOptions} />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      {/* line16 */}
      <Row gutter={24}>
        <Col span={24}>
          <label>Tax policy for foreign investors</label>
          <div className="switch-item">
            <Form.Item name="foreignInvestorsTaxPolicyView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <Form.Item name="foreignInvestorsTaxPolicy">
            <TextArea
              rows={4}
              placeholder="including tax incentives, tax on materials to be imported for PPP project, tax on income derived from PPP project etc"/>
          </Form.Item>
        </Col>
      </Row>

      {/* line17 */}
      <Row gutter={24}>
        <Col span={24}>
          <label>Foreign exchange policy for foreign investors</label>
          <div className="switch-item">
            <Form.Item name="foreignInvestorsExchangePolicyView" valuePropName="checked">
              <Switch checkedChildren="Allow access" unCheckedChildren="Disable access"/>
            </Form.Item>
          </div>
          <Form.Item name="foreignInvestorsExchangePolicy">
            <TextArea
              rows={4}
              placeholder="including profit repatriation and payment mode of PPP project"/>
          </Form.Item>
        </Col>
      </Row>
    </div>
  );
});
